import React, { useState } from 'react';
import { Box, Datepicker, MainButton, makeToast, NotificationBanner, Text } from '@nova-hf/ui';
import UI from 'beta/store/ui';
import { formatDate } from 'beta/utils/helpers';
import { inject } from 'mobx-react';
import {
  TerminateService,
  useCancelTerminationServiceMutation,
  useUpdateTerminationServiceMutation,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type FiberServiceTerminationProps = {
  termination: TerminateService | undefined;
  terminationRefetch: () => void;
  hasPingAlert: boolean;
  ui: UI;
};

const FiberServiceTermination = ({
  termination,
  terminationRefetch,
  hasPingAlert,
  ui,
}: FiberServiceTerminationProps) => {
  const { t } = useTranslation(['fiber', 'errors', 'service']);

  const [isChangingTerminationDate, setIsChangingTerminationDate] = useState(false);
  const [selectedDate, setSelectedDate] = useState(
    termination?.terminateAt ? new Date(termination?.terminateAt) : new Date(),
  );
  const [errorMessage, setErrorMessage] = useState('');
  const currentTerminationDate = termination?.terminateAt
    ? new Date(termination?.terminateAt)
    : new Date();
  const [terminationDate, setTerminationDate] = useState(currentTerminationDate);

  const monthNames = [
    t('service:months.january'),
    t('service:months.february'),
    t('service:months.march'),
    t('service:months.april'),
    t('service:months.may'),
    t('service:months.june'),
    t('service:months.july'),
    t('service:months.august'),
    t('service:months.september'),
    t('service:months.october'),
    t('service:months.november'),
    t('service:months.december'),
  ];

  const [cancelTerminationService] = useCancelTerminationServiceMutation({
    onCompleted() {
      terminationRefetch();
      makeToast.success(t('fiber:fiberTermination.toast.cancelText'), '');
    },
    onError(error) {
      if (error instanceof Error) {
        makeToast.danger(t('fiber:fiberTermination.toast.failText'), '');
        setErrorMessage(error.message);
      }
    },
  });

  const handleCancelTermination = async () => {
    await cancelTerminationService({
      variables: {
        input: {
          serviceId: termination?.serviceId ?? '',
          id: termination?.id ?? '',
        },
      },
    });
  };

  const [updateTerminationService] = useUpdateTerminationServiceMutation({
    onCompleted() {
      makeToast.success(t('fiber:fiberTermination.toast.terminationDateText'), '');
    },
    onError(error) {
      if (error instanceof Error) {
        makeToast.danger(t('fiber:fiberTermination.toast.failText'), '');
        setErrorMessage(error.message);
      }
    },
  });

  const handleUpdateDateOnTermination = async () => {
    if (selectedDate) {
      const newDate = new Date(selectedDate);
      const currentDate = new Date();

      if (
        newDate.getDate() === currentDate.getDate() &&
        newDate.getMonth() === currentDate.getMonth() &&
        newDate.getFullYear() === currentDate.getFullYear()
      ) {
        newDate.setHours(
          currentDate.getHours() + 1,
          currentDate.getMinutes(),
          currentDate.getSeconds(),
          0,
        );
      } else {
        newDate.setHours(13, 0, 0, 0);
      }

      try {
        await updateTerminationService({
          variables: {
            input: {
              serviceId: termination?.serviceId ?? '',
              terminateAt: newDate,
              id: termination?.id ?? '',
            },
          },
        });
        setIsChangingTerminationDate(false);
        setTerminationDate(newDate);
      } catch (error) {
        if (error instanceof Error) {
          makeToast.danger(t('fiber:fiberTermination.toast.failText'), error.message);
          setErrorMessage(error.message);
        }
      }
    }
  };

  const index = terminationDate ? terminationDate.getMonth() : 0;
  const terminationDesc = `Þann ${formatDate(terminationDate, 'dd')}.${
    monthNames[index]
  }${formatDate(terminationDate, ' yyyy')} kl ${formatDate(terminationDate, 'HH:mm')} ${t(
    'fiber:fiberTermination.description',
  )}`;

  return (
    <NotificationBanner
      icon="minus"
      color={ui?.serviceColor}
      title={t('fiber:fiberTermination.title')}
      description={terminationDesc}
      eyebrowText=""
      hasPingAlert={hasPingAlert}
      {...(!isChangingTerminationDate && {
        mainButtonColored: {
          text: t('fiber:fiberTermination.cancelTerminationButton'),
          onClick: handleCancelTermination,
        },
      })}
      {...(!isChangingTerminationDate && {
        mainButtonWhite: {
          text: t('fiber:fiberTermination.changeDateButton'),
          icon: 'calendar',
          onClick: () => setIsChangingTerminationDate(true),
        },
      })}
    >
      {isChangingTerminationDate && (
        <>
          <Datepicker
            color={ui?.serviceColor}
            selected={selectedDate ?? new Date()}
            onSelect={(date) => setSelectedDate(date)}
            inputId="terminationDate"
            inputName="terminationDate"
            minDate={new Date()}
          />
          <Box display="flex" marginY={2} gap={4}>
            <MainButton
              colorScheme={ui?.serviceColor}
              text={t('fiber:fiberTermination.updateTerminationButton')}
              onClick={handleUpdateDateOnTermination}
            />
            <MainButton
              colorScheme="white"
              text={t('fiber:fiberTermination.cancelButton')}
              onClick={() => setIsChangingTerminationDate(false)}
            />
          </Box>
          {errorMessage && (
            <Text variant="subtitleBold" color="warning" marginTop={2} marginBottom={2}>
              {t('fiber:fiberTermination.errorMessage', { error: errorMessage })}
            </Text>
          )}
        </>
      )}
    </NotificationBanner>
  );
};

export default inject('authentication', 'ui')(FiberServiceTermination);